<script >
import index from "vue-meta";

export default {
  computed: {
    index() {
      return index
    }
  },
data(){
  return{
    Category: [],
    queryId: {
      category_id: null,
    },
    GoodsId:[],
  }
},
  methods:{
    LoadGoodsIdData() {
      this.$http.get("http://localhost:8080/goods/queryId", {
            params: {
            category_id:this.Parameter() //得到查询条件
            }
          }
      ).then((res) => {
        this.GoodsId = res.data;
        console.log(this.GoodsId);
        this.$route.params.categoryId=null  //消除原来传入的值
      }).catch(function (err) {
        console.log(err)
      })
    },
    LoadCategoryData() {
      this.$http.get("http://localhost:8080/category/querycate",{
        params:{
          category_id:this.Parameter()
        }
      }).then((res) => {
        this.Category = res.data;
        console.log(this.Category);
        this.$route.params.categoryId=null
      }).catch(function (err) {
        console.log(err);
      });
    },

    //进行传值数据处理

    Parameter( ){
      if(this.$route.params.categoryId!=null){
        this.queryId.category_id=this.$route.params.categoryId;
      }
      return this.queryId.category_id;
    },
    Select(){
      console.log(this.$route.params.categoryId);
      this.LoadGoodsIdData();
      console.log(this.$route.params.categoryId);
      this.LoadCategoryData();
}
  },
  mounted() {
  this.LoadGoodsIdData();
  this.LoadCategoryData();
  }
}
</script>

<template>
  <div class="search-page">
    <div class="filter-container">
      <div class="filter-bar">
        <div class="container">
        <el-container>
            <el-header> <span  style="font-size:larger;"></span>
              <el-select v-model="queryId.category_id" placeholder="" style="width: 300px;margin-left: 10%" clearable>
                <el-option label="POPOMART" value="1" />
                <el-option label="DIMOO" value="2" />
                <el-option label="LABUBU" value="3" />
                <el-option label="FARMER BOB" value="4" />
                <el-option label="Hirono" value="5" />
                <el-option label="Shinwoo" value="6" />
                <el-option label="Rico" value="9" />
                <el-option label="PINO JELLY" value="13" />
                <el-option label="Laura" value="14" />
              </el-select>&nbsp;&nbsp;
              <button style="width: 100px;height: 30px;background-color: #4ea7f9" @click="Select">选择</button>
            </el-header>
            <el-container >

              <el-col :span="12">
                <div v-if="Category && Category.length">
                  <!-- 假设Category是一个数组，遍历并显示每个元素 -->
                  <div v-for="(category, index) in Category" :key="index">
                    <!-- 显示category对象的某个属性，例如name -->
                    <img  :src="'http://localhost:8080/image/upload/'+category.category_image"  alt="category_image" style="width: 300px; height: 300px;text-align: center"/>
                  </div>
                </div>
              </el-col>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-col :span="12">
                <div v-if="Category && Category.length">
                  <!-- 假设Category是一个数组，遍历并显示每个元素 -->
                  <div v-for="(category, index) in Category" :key="index">
                    <!-- 显示category对象的某个属性，例如name -->
                    <div class="product-info" style="width: 300px;">
                      {{ category.category_description }}
                    </div>
                  </div></div></el-col>

            </el-container>
          </el-container>
        </div>
      </div>
    </div>
    <div class="product-list">
      <div  v-for="goods in GoodsId" :key="goods.goods_id" class="product-item">
        <router-link :to="{name:'GoodsDetails',params:{goodsId:goods.goods_id,categoryId:goods.category_id} }">
        <img :src="'http://localhost:8080/image/upload/'+goods.goods_image"   alt="goods_image"/>
        </router-link>
        <div class="product-info">
          <h3>{{ goods.goods_name }}</h3>
          <h2>价格：{{ goods.goods_price }}</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<style >
.search-page {
  max-width: 60%;
  margin: 0 auto;
  padding: 20px;
}
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 50px;

}

.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}

.product-info {
  margin-top: 10px;
}
.filter-bar {
  margin-top: 0;
  margin-bottom: 20px;
}
.filter-container {
  display: flex;
  margin-left:5%;
}
.container {
  /* 设置左边距为20px */
 margin-left: 0;
}

</style>